<template>
    <div class="list" ref="wrapper">
      <div>
        <div class="area">
          <div class="title">当前城市</div>
          <ul class="btn-list">
            <li class="btn-wrapper">
              <div class="btn">{{this.$store.state.city}}</div>
            </li>
          </ul>
        </div>
        <div class="area">
          <div class="title">热门城市</div>
          <ul class="btn-list">
            <li
              class="btn-wrapper"
              v-for="(item,index) of hot"
              :key="item.id"
              @click="handCityClick(item.name)"
            >
              <div class="btn">{{item.name}}</div>
            </li>
          </ul>
        </div>
        <div class="area"
             v-for="(item,key) of cities"
             :key="key"
             :ref="key"
        >
          <div class="title">{{key}}</div>
          <ul class="item-list">
                <li class="item" v-for="text of item" @click="handCityClick(text.name)">{{text.name}}</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import Bscroll from 'better-scroll'
    export default {
        name: "List",
        mounted () {
          this.scroll=new Bscroll(this.$refs.wrapper)
        },
        props:{//接受参数
            cities:Object,
            hot:Array,
            letter:String//接受传递过来的字母
        },
        methods : {
          handCityClick(city){
           this.$store.dispatch("changeCity",city)
            this.$router.push("/")
          }
        },
        watch : {
          letter () {//监听letter的变化
            if(this.letter){//如果letter不为空的时候
              const element=this.$refs[this.letter][0]
              this.scroll.scrollToElement(element);//跳转到指定的scroll位置
            }
            // console.log(this.letter);
          }
        }
    }
</script>

<style lang="stylus" scoped>
   .list{
     overflow hidden
     position absolute;
     top:.8rem;
     left:0;
     bottom:0;
     right:0;
      .title{
        height:.28rem;
        background-color:#eee;
        padding-left:.1rem;
        color:#666;
        font-size .13rem
        border-bottom .01rem solid #ccc
        line-height .28rem
      }
     .btn-list{
        overflow:hidden;
        padding:.05rem .3rem .05rem .05rem;
       box-sizing :border-box;
       .btn-wrapper{
         width: 33.3%;
         float:left;
         /*border:.01rem solid #333;*/
         .btn{
            text-align:center;
            margin:.05rem;
           border:.01rem solid #ccc;
           border-radius:.03rem;
           padding:.05rem 0;
         }
       }
     }
     .item-list{
       .item{
         color:#666;
         padding-left:.1rem;
         line-height .38rem
         border-bottom :.01rem solid #ccc;
       }
     }
   }
</style>
